<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>userinfo</title>
    <!-- 确保引入Vue.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <!-- 或使用本地路径引入vue.js -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>
        .container {
            max-width: 400px;
            background: #F8F9FD;
            background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(244, 247, 251) 100%);
            border-radius: 40px;
            padding: 25px 35px;
            border: 5px solid rgb(255, 255, 255);
            box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 30px 30px -20px;
            margin: 100px;
        }

        .heading {
            text-align: center;
            font-weight: 900;
            font-size: 30px;
            color: rgb(16, 137, 211);
        }

        .form {
            margin-top: 50px;
        }

        .input {
            width: 90%;
            background: white;
            border: none;
            padding: 20px 20px;
            border-radius: 20px;
            margin-top: 15px;
            box-shadow: #cff0ff 0px 10px 10px -5px;
            border-inline: 2px solid transparent;
        }

        .input::-moz-placeholder {
            color: rgb(170, 170, 170);
        }

        .input::placeholder {
            color: rgb(170, 170, 170);
        }

        .input:focus {
            outline: none;
            border-inline: 2px solid #12B1D1;
        }

        .forgot-password {
            display: block;
            margin-top: 10px;
            margin-left: 10px;
        }

        .forgot-password a {
            font-size: 11px;
            color: #0099ff;
            text-decoration: none;
        }

        .login-button {
            display: block;
            width: 100%;
            font-weight: bold;
            background: linear-gradient(45deg, rgb(16, 137, 211) 0%, rgb(18, 177, 209) 100%);
            color: white;
            padding-block: 20px;
            margin: 20px auto;
            border-radius: 20px;
            box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;
            border: none;
            transition: all 0.2s ease-in-out;
        }

        .login-button:hover {
            transform: scale(1.03);
            box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 23px 10px -20px;
        }

        .login-button:active {
            transform: scale(0.95);
            box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 15px 10px -10px;
        }

        .agreement {
            display: block;
            text-align: center;
            margin-top: 15px;
        }

        .agreement a {
            text-decoration: none;
            color: #0099ff;
            font-size: 9px;
        }

        .input-box {
            width: 90%;
            background: dodgerblue;
            border: none;
            padding: 20px 20px;
            border-radius: 20px;
            margin-top: 40px;
            box-shadow: #cff0ff 0px 10px 10px -5px;
            border-inline: 2px solid transparent;
        }

        .button-group {
            display: flex;
            justify-content: space-between; /* 根据需要调整间距，如果希望它们紧挨着，可以使用 'flex-start' */
        }

        .input-box {
            /* 保持或调整您原有的按钮样式 */
            margin: 0; /* 取消默认外边距，确保按钮紧密排列，如有需要可自定义 */
        }


        * {
            padding: 0;
            margin: 0;
        }


    </style>
</head>
<body>
<div id="app" style="display: flex; justify-content: center; align-items: center; min-height: 100vh;">
    <div class="container">
        <h2 class="heading">用户注册</h2>
        <form @submit.prevent="onSubmit">
            <input required v-model="userInfo.username" type="text" placeholder="username" class="input"/>
            <input required v-model="userInfo.password" type="password" placeholder="password" class="input"/>
            <input required v-model.number="userInfo.passwordtwo" type="password" placeholder="confirm password" class="input"/>
            <div class="button-group">
                <input type="submit" value="确认" class="input-box" @click="saveInfo"/>
                <input type="submit" value="返回" class="input-box" @click="back"/>
            </div>
        </form>

    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            userInfo: {
                username: '',
                password: '',
                passwordtwo: '',
            }
        },
        methods: {
            saveInfo: function (event) {
                event.preventDefault();
                // 检查用户名是否为空
                if (!this.userInfo.username) {
                    alert('请填写用户名');
                    return;
                }
                const data = {
                    user: this.userInfo.username,
                    password: this.userInfo.password
                };
                $.ajax({
                    type: "POST",
                    url: "http://127.0.0.1:8888/registration", // 替换成实际的接口URL
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    success: function (response) {
                        if (response.status === 1) { //假设返回的JSON包含status字段
                        }
                    }
                })

                // 这里可以添加逻辑来处理表单数据，比如发送到服务器
                console.log('保存的信息：', this.userInfo);
                // 将此URL替换为实际的登录页面URL
                window.location.href = "login.html";
                alert('信息已保存！点击确认返回登陆页面');
            },
            onSubmit: function (event) {
                // 阻止默认表单提交行为
                event.preventDefault();
                if (this.checkPassword()) {
                    // 如果密码验证通过，继续执行保存操作
                    this.saveInfo();
                }
            },
            checkPassword: function () {
                if (this.userInfo.password !== this.userInfo.passwordtwo) {
                    console.log(this.userInfo.password)
                    console.log(this.userInfo.passwordtwo)
                    alert('两次密码不一致');
                    return false;
                }
                return true;

            },
            back: function () {
                window.location.href = "login.html";
            }
        }
    });
</script>
</body>
</html>